<div [@routerTransition] id="salary-manage">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>工资列表管理</span>
                </h3>
                <span class="m-section__sub">
                    工资列表维护
                </span>
            </div>
            <div class="col text-right mt-3 mt-md-0">
                <button (click)="importSalary()" class="btn btn-primary"><i class="fa fa-plus"></i> 导入数据库</button>
                <div class="btn-group dropdown mr-2" dropdown>
                    <button dropdownToggle class="dropdown-toggle btn btn-outline-success">
                        <i class="far fa-file-excel"></i><span class="caret"></span> 导入Excel
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-excel-operations" *dropdownMenu>
                        <li>
                            <a href="javascript:;" class="no-padding">
                                <span>
                                    <p-fileUpload customUpload="true" name="ExcelFileUpload" #ExcelFileUpload
                                        maxFileSize="10000000" auto="auto" accept=".csv,.xls,.xlsx"
                                        (uploadHandler)="uploadExcel($event)" (onError)="onUploadExcelError()"
                                        chooseLabel="选择文件">
                                    </p-fileUpload>
                                </span>
                            </a>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li>
                            <span class="dropdown-item-text text-muted" href="#">
                                <small
                                    [innerHTML]="l('ImportToExcelSampleFileDownloadInfo', '<a href=/assets/sampleFiles/工资表.xlsx>' + l('ClickHere') + '</a>')"></small>
                            </span>
                        </li>

                    </ul>
                </div>

            </div>
        </div>
    </div>

    <div class="m-content">
        <!-- [hidden]="showMassage"  -->
        <div class="m-alert m-alert--icon m-alert--icon-solid m-alert--outline alert alert-danger alert-dismissible fade show"
            role="alert">
            <div class="m-alert__icon">
                <i class="flaticon-exclamation-1"></i>
                <span></span>
            </div>
            <div class="m-alert__text">
                <strong>
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">
                            {{importSuccess}}
                        </font>
                    </font>
                </strong>
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        {{importMessage}}
                    </font>
                </font>
            </div>
            <div class="m-alert__close">
                <button type="button" class="close" data-dismiss="alert" aria-label="关"></button>
            </div>
        </div>
        <div class="m-portlet">
            <div class="m-portlet__body  m-portlet__body--no-padding">

                <div class="row m-row--no-padding m-row--col-separator-xl">
                    <div class="col-md-12">
                        <div class="m-widget24">
                            <!-- [frozenColumns]="year" -->
                            <p-table #dataTable [value]="salary" [scrollable]="true" selectionMode="single">
                                <ng-template pTemplate="colgroup" let-columns>
                                    <colgroup>
                                        <col *ngFor="let col of columns" style="width:150px">
                                    </colgroup>
                                </ng-template>
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th rowspan="2" style="width:100px">年份</th>
                                        <th rowspan="2" style="width:100px">月份</th>
                                        <th rowspan="2" style="width:100px">部门</th>
                                        <th rowspan="2" style="width:100px">姓名</th>
                                        <th rowspan="2" style="width:100px">员工编号</th>
                                        <th rowspan="2" style="width:100px">岗位基本工资</th>
                                        <th rowspan="2" style="width:100px">岗位津贴</th>
                                        <th rowspan="2" style="width:100px">研究生津贴</th>
                                        <th rowspan="2" style="width:100px">班组长津贴</th>
                                        <th rowspan="2" style="width:100px">绩效工资</th>
                                        <th rowspan="2" style="width:100px">加班费</th>
                                        <th rowspan="2" style="width:100px">加班餐补</th>
                                        <th rowspan="2" style="width:100px">保密津贴</th>
                                        <th rowspan="2" style="width:100px">保健费</th>
                                        <th rowspan="2" style="width:100px">交通费</th>
                                        <th rowspan="2" style="width:100px">其他</th>
                                        <th rowspan="2" style="width:100px">公司预支生育津贴</th>
                                        <th rowspan="2" style="width:100px">本月应发工资</th>
                                        <th rowspan="2" style="width:100px">本月应发合计</th>
                                        <th rowspan="2" style="width:100px">累计应税金额</th>
                                        <th colspan="2" style="width:200px">养老统筹</th>
                                        <th colspan="2" style="width:200px">医疗保险</th>
                                        <th colspan="2" style="width:200px">失业保险</th>
                                        <th colspan="1" style="width:100px">工伤保险</th>
                                        <th colspan="1" style="width:100px">生育保险</th>
                                        <th colspan="2" style="width:200px">公积金</th>
                                        <th rowspan="2" style="width:100px">累计专项附加扣除</th>
                                        <th rowspan="2" style="width:100px">累计应税收入</th>
                                        <th rowspan="2" style="width:100px">当月应税金</th>
                                        <th rowspan="2" style="width:100px">实发工资</th>
                                        <th rowspan="2" style="width:100px">实发金额</th>

                                    </tr>
                                    <tr>
                                        <th colspan="1" style="width:100px">单位缴纳16%</th>
                                        <th colspan="1" style="width:100px">个人缴纳8%</th>
                                        <th colspan="1" style="width:100px">单位缴纳10%</th>
                                        <th colspan="1" style="width:100px">个人缴纳2%</th>
                                        <th colspan="1" style="width:100px">单位缴纳0.5%</th>
                                        <th colspan="1" style="width:100px">个人缴纳0.5</th>
                                        <th colspan="1" style="width:100px">单位缴纳0.45%</th>
                                        <th colspan="1" style="width:100px">单位缴纳0.5%</th>
                                        <th colspan="1" style="width:100px">单位缴纳12%</th>
                                        <th colspan="1" style="width:100px">个人缴纳12%</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-salary>
                                    <tr>
                                        <td style="width:100px">{{salary.year}}</td>
                                        <td style="width:100px">{{salary.month}}</td>
                                        <td style="width:100px">{{salary.dptName}}</td>
                                        <td style="width:100px">{{salary.userName}}</td>
                                        <td style="width:100px">{{salary.userCode}}</td>
                                        <td style="width:100px">{{salary.postWageBase}}</td>
                                        <td style="width:100px">{{salary.postSubsidy}}</td>
                                        <td style="width:100px">{{salary.graduateSubsidy}}</td>
                                        <td style="width:100px">{{salary.jobForemanSubsidy}}</td>
                                        <td style="width:100px">{{salary.performanceWage}}</td>
                                        <td style="width:100px">{{salary.overtimePay}}</td>
                                        <td style="width:100px">{{salary.overtimeMealSubsidy}}</td>
                                        <td style="width:100px">{{salary.secrecySubsidy}}</td>
                                        <td style="width:100px">{{salary.healthServicesPay}}</td>
                                        <td style="width:100px">{{salary.trafficPay}}</td>
                                        <td style="width:100px">{{salary.otherPay}}</td>
                                        <td style="width:100px">{{salary.birthPrepaid}}</td>
                                        <td style="width:100px">{{salary.salaryPayable}}</td>
                                        <td style="width:100px">{{salary.salaryPayableTotal}}</td>
                                        <td style="width:100px">{{salary.taxableAmount}}</td>
                                        <td style="width:100px">{{salary.annuityOfCompany}}</td>
                                        <td style="width:100px">{{salary.annuityOfPerson}}</td>
                                        <td style="width:100px">{{salary.medicareOfCompany}}</td>
                                        <td style="width:100px">{{salary.medicareOfPerson}}</td>
                                        <td style="width:100px">{{salary.unemploymentOfCompany}}</td>
                                        <td style="width:100px">{{salary.unemploymentOfPerson}}</td>
                                        <td style="width:100px">{{salary.employmentInjuryOfCompany}}</td>
                                        <td style="width:100px">{{salary.birthInsuranceOfCompany}}</td>
                                        <td style="width:100px">{{salary.accumulationFundOfCompany}}</td>
                                        <td style="width:100px">{{salary.accumulationFundOfPerson}}</td>
                                        <td style="width:100px">{{salary.specialAdditionalDeductionTotal}}</td>
                                        <td style="width:100px">{{salary.taxableSalaryTotal}}</td>
                                        <td style="width:100px">{{salary.taxTotal}}</td>
                                        <td style="width:100px">{{salary.takeHomeWage}}</td>
                                        <td style="width:100px">{{salary.takeHomeAmount}}</td>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="footer">
                                    <tr>
                                        <td colspan="21">Totals</td>
                                        <td style="width:100px">{{amount}}</td>
                                    </tr>
                                </ng-template>
                            </p-table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>